<template>
  <div>
    <el-container style="min-width: 1200px">
      <!-- 头部 -->
      <el-header class="m-header">
          <div class="m-title">
            警快办注册送水数据统计平台
          </div>
          <!-- 头像 -->
          <div class="m-user">
            <div class="avatar-box">
              <el-popover
                placement="top"
                width="160"
                v-model="visible">
                <div class="i-popover-tab">
                  <el-button class="tabBtn" type="text" @click="exit">退出登录</el-button>
                </div>
                <div class="i-popover-tab">
                  <el-button class="tabBtn" type="text" @click="editPwShow = true">修改密码</el-button>
                </div>
                <!-- 触发弹出的按钮 -->
                <i class="el-icon-arrow-down i-arrow" style="color: white;marginRight: 10px" slot="reference">
                </i>
              </el-popover>
              <div class="useName">{{userName}}</div>
              <!-- <i class="m-icon-exit el-icon-error" @click="exit"></i> -->
            </div>
          </div>
      </el-header>
      <!-- 侧边栏菜单 -->
      <el-container>
        <el-aside style="width: 200px">
        <el-menu
          :default-active="routeMenu"
          class="el-menu-vertical-demo"
          text-color="#222222"
          background-color="#EEF1F6"
          active-text-color="#0D1F51"
          style="height: calc(100vh - 80px)">
          <!-- 无子菜单的项 -->
          <el-menu-item :index='item.name' style="text-align: left"  v-for="item in menulist" :key="item.id" @click="goRouter(item.name)">
           <i :class="item.icon"></i>
           <span style="margin-left: 5px; font-weight: bold">{{item.label}}</span>
          </el-menu-item>
        </el-menu>
        </el-aside>
        <!-- 内容区域 -->
        <el-main style="height: calc(100vh - 80px); min-width: 1200px; max-width: calc(100% - 140px)">
          <div class="content-box">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog style="text-align: center"
      title="修改密码"
      :visible.sync="editPwShow" :close-on-click-modal="false"
      width="480px"
      >
      <el-form size="small" style="text-align: center" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPwsd" style="text-align: center">
          <el-input type="password" size="small" v-model.trim="ruleForm.oldPwsd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwsd">
          <el-input type="password" size="small" v-model.trim="ruleForm.newPwsd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPwsd1">
          <el-input type="password" size="small" v-model.trim="ruleForm.newPwsd1"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPwShow = false">取 消</el-button>
         <el-button type="primary" :loading="editPwLoading" @click="editPw">修 改</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
// import { mapState } from 'vuex'
import { _editPw } from '../api/api'
export default {
  created () {
    // window窗口改变 就重新计算高度 做到自适应
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
    // this.routeMenu() // 匹配菜单栏与路由
    this.userName = window.sessionStorage.getItem('userName') || '未登录'// 加载用户名
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.setTableHeight)
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === this.ruleForm.oldPwsd) {
        callback(new Error('旧密码不能和新密码相同'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.ruleForm.newPwsd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // activeMenu: '', // 当前menu选中
      visible: false, // 是否显示弹出框 popover
      editPwShow: false,
      avatarUrl: '../assets/img/myavtor.png"',
      userName: '未登录',
      editPwLoading: false,
      ruleForm: { oldPwsd: '', newPwsd: '', newPwsd1: '' },
      rules: {
        oldPwsd: [
          { required: true, message: '原密码不能为空', trigger: 'blur' }
        ],
        newPwsd: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPwsd1: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      // 菜单列表
      menulist: [
        {
          label: '领取详单',
          name: 'receiveOrder',
          id: '1',
          icon: 'm-icon el-icon-document-checked'
        },
        {
          label: '领取报表',
          name: 'receiveReport',
          id: '2',
          icon: 'm-icon el-icon-tickets'
        }
      ]
    }
  },
  methods: {
    // 重新适配高度
    setTableHeight () {
      const height = (window.document.documentElement.clientHeight)
      this.$store.dispatch('setTableHeight', height)
    },
    exit () {
      window.sessionStorage.clear()
      window.localStorage.clear()
      // this.$store.dispatch('setUserName', null) // vuex保存用户名
      this.$router.push('/login')
      // 刷新页面就是
      window.location.reload()
    },
    editPw () {
      if (this.editPwLoading) return
      this.editPwLoading = true
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const editPwData = {
            sOldPwd: this.ruleForm.oldPwsd,
            sNewPwd: this.ruleForm.newPwsd
          }
          const res = await _editPw(editPwData)
          if (res.success) {
            this.$message({ message: '密码修改成功, 请重新登录！', type: 'success' })
            this.editPwShow = false
            this.$router.push('/')
          } else {
            this.$message.error(res.info)
          }
        }
      })
      this.editPwLoading = false
    },
    // 路由匹配菜单选中, 可以写成计算属性的
    // routeMenu () {
    //   const p = this.$route.path.split('/')[2]
    //   console.log(this.$route.path.split('/'))
    //   this.activeMenu = p
    // },
    // 路由跳转
    goRouter (name) {
      const path = `/index/${name}`
      this.$router.push(path)
    }
  },
  computed: {
    routeMenu () {
      return this.$route.path.split('/')[2]
    }
  }
}
</script>
<style lang="less">
.el-container{
  .m-header{
    background-size: 100% 80px;
    height: 80px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left:30px;
    .m-title{
      font-size:30px;
      color: @themeWhite;
    }
    .m-user{
      .avatar-box{
        display: flex;
        align-items: center;
        .useName{
          font-weight: bold;
          color: @themeWhite;
        }
      }
    }
  }
  .el-main{
    padding: 0 !important;
    background: #EFF5FA;
    .content-box{
      padding: 10px 10px 0 10px;
    }
  }
}
// 弹出框按钮样式
.tabBtn{
  width: 100%;
  text-align: center;
  color: #606266 !important;
  border-top:1px solid #dcdfe7 !important;
}
/* icon样式 */
.m-icon {
  color: @themeColor !important;
  font-weight: bold !important;
}
.m-icon-exit{
  color: @themeWhite;
  font-size: 25px;
  padding-left: 10px;
  cursor: pointer;
}
.m-icon-exit:hover{
  color: @themeTextColor;
}
.i-arrow{
  cursor: pointer;
  color: @themeWhite;
  margin-right: 10px;
}
.i-popover-tab:hover{
  background: @themeColorLight;
}
/* 其他 */
.el-menu--horizontal>.el-menu-item {
  height: 80px !important;
  line-height: 80px !important;
  font-size: 15px !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
  background: rgba(6,24,133, 0) !important;
  border-bottom: 2px solid #fff !important;
}
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
  background-color: rgba(6,24,133, 0.4) !important
}
.el-submenu__title:hover {
  background-color: @themeColorLight !important;
}
.el-menu-item:focus, .el-menu-item:hover {
  background-color: @themeColorLight !important;
}
.el-submenu .el-menu-item {
  text-align: left;
  padding-left: 48px !important;
  background: rgba(255,255,255, 0) !important;
}
.submenu-text2:hover {
  background-color: @themeColorLight !important;
}
.el-menu-item.is-active{
  background: @themeColorLight !important;
}
.el-submenu .el-menu-item.is-active{
  background: @themeColorLight!important;
  margin-right: 100px;
}
.el-header, .el-footer {
  background-color: @themeColor;
  color: #fff;
  text-align: center;
  padding: 0  10px !important;
}
.menu-text1 {
  color: @themeColor !important;
  font-weight: bold !important;
}
.menu-text2 {
  color: @themeColor !important;
  font-weight: bold !important;

}
.submenu-text1 {
  color: @themeColor !important;

}
.submenu-text2 {
  color: @themeColor !important;
}
.icontext {
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 20px !important;
}
.topbg {
  /*background: url(../assets/topbg.png) no-repeat;*/
  background-color: @themeColor;
  background-size: 100% 80px;
  height: 80px !important;
}
.tpbg {
  position:absolute;
  width: calc(100% - 280px);
  margin-left: 220px;
  min-width: 920px;
  /* background: url(../assets/tpbg.png) no-repeat; */
  /*background-color: @themeColor;*/
  background-size: calc(100% - 108px) 80px;
  height: 80px;
}
.rtBtns {
  width: 100%;
  color: #606266 !important;
  border-bottom:1px solid #dcdfe7 !important;
}
.el-badge__content.is-fixed {
  top: 30px !important;
}
.qqqwer {
  padding: 0 10px;
  cursor: pointer;
  height: 80px;
}
</style>
